HTML5 canvas实现中奖转盘的实例代码

来源:网络整理作者: 发布时间:2020-12-22 17:25

本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码，有一定的参考价值，有需要的朋友可以参考一...

本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在学canvas做动画，于是就写个转盘练下手。
上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）

代码很简单，都注释了，直接上代码吧，嘤嘤嘤

html<body> <canvas id="canvas">您的浏览器不支持canvas</canvas> <img src=https://www.ym97.com/"./zp.jpg" alt="" id="img"> </body>css<style> #canvas{ position: absolute; left: 230px; top: 230px; } #img{ width: 600px; height: 600px; } </style>js var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //设定画布和宽 canvas.width=140; canvas.height=140; var then = Date.now(); var now;//利用时间差来控制转盘最小转动时间 var first_deg=0;//用来记录转动的角度 var rotate_deg=0;//每次转动的角度，用来实现变速运动 var end_deg =85;//中奖角度 var speedUp = true;//判断是否在加速阶段 var f; // 因为canvas的rotate函数是根据左上角坐标（0,0）来旋转的，所以移动画布 context.translate(70,70); function draw(){ context.clearRect(-70, -70, 70, 70); context.beginPath(); context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true); context.moveTo(-50,0); context.lineTo(50,0); context.lineTo(0,-70); context.rotate(rotate_deg*Math.PI/180); context.closePath(); context.fillStyle='red'; context.fill(); } // 将运动分为3段，加速，匀速，减速 function loop(){ //循环调用，产生动画效果 f = window.requestAnimationFrame(loop); now = Date.now(); //开始加速转动，转到速度为20就不加速了，至于为什么是20，看起来舒服而已 if(rotate_deg<=20&&speedUp){ rotate_deg +=1; }; //2s后开始减速（即最小转动时间），减速是为了视觉上的美观 if(now - then > 2000){ //如果下面设置的是固定角度，那这里的最小速度建议为1，因为每次转动角度过大，一圈很可能错过中奖的角度，导致转很多圈。 if(rotate_deg>=2){ speedUp = false; rotate_deg -=1; } //设置中奖区间为+-5度（设置固定角度会让动画有点难看） if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){ window.cancelAnimationFrame(f);//停止循环 //中奖操作 } }; first_deg += rotate_deg;//记录转过的角度 draw();//绘制图形 } loop();

最后

现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。

相关热词： HTML HTML5 实例

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/7233.shtml

上一篇：标签b是什么意思

下一篇：HTML5应用：离线的应用以及

用react的ReactCSSTransitionGroup插件	当你自己回头来看你写的这些
④格式标签粗体：b/b 斜体：	我们直接看代码： !DOCTYPE htm
假设我们的HTML代码如下： ul	那么使用 CSS3 新增的选择器无
我们尝试一下更新一下HTML结构	微软IE9平台预览版完整支持H
IE9正式版无论从性能提升还是	CSS3东西最新资讯
各路人马对它的热情都极为高	中联重科CSS3混凝土喷射机器手
CSS3与页面机关进修总结（二）	HTML5 学习总结（四）canvas绘图
四、id选择器（#ID） ID选择器	谈谈一些有趣的CSS题目（十）